<template>
	<div id="myPlayer" style="width: 100%;height:100%;">
		<div :style="'position: relative;max-width: '+ (maxWidth) +'px;max-height: '+ (maxHeight) +'px;width: 100%;height: 100%;'">
			<div class="videoContainer prism-player" ref="videoContainer" :style="'position: absolute;width: 100%;height:100%;background-color: transparent;'">
				<!-- <video :src="url" controls="controls" poster="./dist/logo.jpg" :width="100%" :height="100%" style="position: absolute;background-color: black;"
					@mouseleave="mouseleave" @mouseenter="mouseenter"> -->
					<!-- https://www.cnblogs.com/fps2tao/p/10550726.html  video控制方法 -->
				<video ref="video" name="videoElement" class="centeredVideo unuserselect" autoplay="autoplay" poster="../../../public/dist/logo.jpg" width="100%" height="100%" 
				style="position: absolute;background-color: black;">
				</video>
				<div v-show="showControlBar" :style="'position: absolute;width: 100%;height: 80%;background-color: transparent;'">
					<div v-if="false && videoType == 1 && showVideoInfo && videoInfo" class="info">
						<div style="font-size:20px">{{ videoInfo.name }}</div>
						<div class="">{{ videoInfo.collPointName }}</div>
						<div class="">{{ videoInfo.devName }}</div>
					</div>
					<!-- <div v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" class="alarmTips">报警信息列表</div> -->
					<!-- <div v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" class="recordTips">录像提示</div> -->
					<div v-if="false && videoType > 0 && showVideoInfo && VInfo" class="channelInfo">
						<!-- <div><div class="title">物理频道编号:</div><div class="subTitle">BJ020304</div></div>
						<div><div class="title">直播频道编号:</div><div class="subTitle">zh567332</div></div>
						<div><div class="title">视频编码:</div><div class="subTitle">h264</div></div>
						<div><div class="title">视频编码格式:</div><div class="subTitle">mp4</div></div>
						<div><div class="title">音频编码格式:</div><div class="subTitle">AAC</div></div>
						<div><div class="title">节目视频分辨率:</div><div class="subTitle">720*576</div></div>
						<div><div class="title">节目视频编码率:</div><div class="subTitle">3500kbs</div></div>
						<div><div class="title">声道:</div><div class="subTitle">5声道</div></div>
						<div><div class="title">节目音频编码:</div><div class="subTitle">AAC</div></div>
						<div><div class="title">组播IP和端口:</div><div class="subTitle">10.23.64.84:8900</div></div>
						<div><div class="title">最长延时时间:</div><div class="subTitle">30秒</div></div> -->
						<div class="videoInfoItem"><div class="title">节目视频类型:</div><div class="subTitle">{{ VInfo.VType }}</div></div>
						<div class="videoInfoItem"><div class="title">视频ID:</div><div class="subTitle">{{ VInfo.VPid }}</div></div>
						<div class="videoInfoItem"><div class="title">节目视频编码率:</div><div class="subTitle">{{ VInfo.VRate ? VInfo.VRate + 'kbs' :'' }}</div></div>
						<div class="videoInfoItem"><div class="title">节目视频分辨率:</div><div class="subTitle">{{ VInfo.VWidth ? ( VInfo.VWidth + '*' + VInfo.VHeight ) : '' }}</div></div>
						<div class="videoInfoItem"><div class="title">帧数:</div><div class="subTitle">{{ VInfo.VFps }}</div></div>
						<div class="videoInfoItem"><div class="title">比特位深:</div><div class="subTitle">{{ VInfo.VBitDepth ? (VInfo.VBitDepth + '位') : '' }}</div></div>
						<div class="videoInfoItem"><div class="title">颜色模式:</div><div class="subTitle">{{ VInfo.VColorMode }}</div></div>
						<div class="videoInfoItem"><div class="title">Mark:</div><div class="subTitle">{{ VInfo.Mark }}</div></div>
						<div class="videoInfoItem"><div class="title">BlackEdge:</div><div class="subTitle">{{ VInfo.BlackEdge }}</div></div>
					</div>
					<!-- <div v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" class="alermSet">报警设置</div>	 -->
				</div>
				
				
		
				
				<div class="" :style="'position: absolute;width: 100%;height: 100%;background-color: transparent;'"
					@mouseleave="mouseleave" @mouseenter="mouseenter">
					<!-- 34 46 58 -->
					<!-- 提示音量，不能seek到这里 -->
					<!-- <p class="prism-info-display prism-info-left-bottom" id="player-con_component" style="float: left; margin-left: 0px; margin-top: 0px; display: none;">
						当前音量：<span>51%</span>
					</p> -->
					<!-- 按键提示 -->
					<p class="prism-tooltip" ref="tip" style="position: absolute; left: 5px; bottom: 50px; display: none;">播放</p>
					<!-- 时间进度提示 -->
					<div class="prism-thumbnail" ref="playerComponent" :style="'float: left; margin-left: 0px; margin-top: 0px; border: none; left: '+ progressTipLeft +'px;'">
						<span style="left: 0px;">{{ !isInfinity ? timeStr(dargToTime) : '' }}</span>
					</div>
					<!-- 音量滑块 -->
					<div class="prism-volume-control hover" ref="volumeSlider" @mousemove="volumeCursorMouseMove" @mouseup="volumeCursorMouseUp" @mouseenter="volumeCursorMouseenter" @mouseleave="volumeCursorMouseleave" :style="'float: right;right: 40px;display:'+ (showVolumeSlider?'block':'none') +';'">
						<div class="volume-range">
							<div class="volume-value" :style="'height: '+ volumeValue +'%;'"></div>
							<div @mousedown="volumeCursorMouseDown" class="volume-cursor" :style="'bottom: '+ volumeValue +'%;'"></div>
						</div>
					</div>
					<!-- 控制栏 -->
					<div class="prism-controlbar" ref="prismControlbar" v-show="playerDebug|| showControlBar" style="position: absolute;left: 0px;bottom: 0px;">
						<div class="prism-controlbar-bg"></div>
						<div v-if="true || !myIsLive" name="非直播">
							<!-- 进度条 -->
							<div v-if="!myIsLive" class="prism-progress" style="position: absolute; left: 0px; bottom: 44px;">
								<div class="prism-progress-loaded" style="width: 100%;"></div>
								<div class="prism-progress-played" :style="'width: '+ (duration == 0 ? 0 :(1.6 + currentTime * 98.4/duration)) +'%;'"></div>
								<div class="prism-progress-marker" @click="player_seekto(dargToTime)" @mouseenter="progressMouseenter" @mouseleave="progressMouseleave" @mousemove="progressMousemove"></div>
								<div class="prism-progress-cursor" ref="progressCursor" :style="'right: auto;display:none; left: '+ (0 + currentTime * 98.4/duration) +'%;'">
									<img src="../../../public/dist/img/dragcursor.png">
								</div>
								<p class="prism-progress-time"></p>
							</div>
							<!-- 开始暂停按钮 -->
							<div :class="'prism-play-btn '+ (playing ? 'playing' : '') +' '" @click="videoStart(!playing)" @mouseleave="mouseleave1()" @mouseenter="mouseenter1('tag1')" ref="tag1" style="float: left; margin-left: 15px; margin-top: 12px;">
							</div>
							<!-- 停止 -->
							<div :class="'prism-stop-btn'" @click="videoStop" @mouseleave="mouseleave1()" @mouseenter="mouseenter1('tag0')" ref="tag0" style="float: left; margin-left: 15px; margin-top: 12px;">
							</div>
							<!-- 时间 -->
							<div class="prism-time-display unuserselect" style="float: left; margin-left: 10px; margin-top: 5px;">
								<span class="current-time" style="display: inline;">{{ timeStr(currentTime) }}</span>
								<span v-show="!isInfinity" class="time-bound" style="display: inline;">/</span>
								<span v-show="!isInfinity" class="duration" style="display: inline;">{{ timeStr(duration) }}</span>
							</div>
							<!-- 快退 快进 上一帧 下一帧 -->
							<div style="float: left; margin-left: 10px; margin-top: 12px;">
								<a-tooltip v-if="!myIsLive" placement="top" :getPopupContainer="popupContainer">
									<template slot="title">快退10秒</template>
									<a-icon type="fast-backward" style="font-size: 24px;" @click="player_seekto(currentTime - 10)"/>
								</a-tooltip>
								<a-tooltip v-if="!myIsLive" placement="top" :getPopupContainer="popupContainer">
									<template slot="title">上一帧</template>
									<a-icon type="step-backward" style="font-size: 24px;" @click="player_seekto(currentTime - 1/fps)"/>
								</a-tooltip>
								<a-tooltip v-if="!myIsLive" placement="top" :getPopupContainer="popupContainer">
									<template slot="title">下一帧</template>
									<a-icon type="step-forward" style="font-size: 24px;" @click="player_seekto(currentTime + 1/fps)"/>
								</a-tooltip>
								<a-tooltip v-if="!myIsLive" placement="top" :getPopupContainer="popupContainer">
									<template slot="title">快进10秒</template>
									<a-icon type="fast-forward" style="font-size: 24px;" @click="player_seekto(currentTime + 10)"/>
								</a-tooltip>
								<!-- <a-icon type="fast-backward" style="font-size: 24px;" @click="player_seekto(currentTime - 10)"/>
								<a-icon type="step-backward" style="font-size: 24px;" @click="player_seekto(currentTime - 1/fps)"/>
								<a-icon type="step-forward" style="font-size: 24px;" @click="player_seekto(currentTime + 1/fps)"/>
								<a-icon type="fast-forward" style="font-size: 24px;" @click="player_seekto(currentTime + 10)"/> -->
							</div>
						</div>
						<!-- 全屏 -->
						<div :class="'prism-fullscreen-btn '+ (isFullScreen || (item && item.isFull) ? 'fullscreen' : '') +' '" @click="fullscreenClick" @mouseleave="mouseleave1()" @mouseenter="mouseenter1('tag2')" ref="tag2" style="float: right; margin-right: 10px; margin-top: 12px;">
						</div>
						<!-- 音量 -->
						<!-- <div class="prism-volume" @click="()=>showVolumeSlider=!showVolumeSlider" @mouseleave="mouseleave1()" @mouseenter="mouseenter1('tag3')" ref="tag3" style="float: right; margin-right: 5px; margin-top: 10px;"> -->
						<div class="prism-volume" @click="volumeClick" @mouseleave="volumeMouseleave" @mouseenter="()=>showVolumeSlider=true" ref="tag3" style="float: right; margin-right: 5px; margin-top: 10px;">
							<div :class="'volume-icon ' + (volumeValue ? '' : 'mute') +''">
								<div class="short-horizontal"></div>
								<div class="long-horizontal volume-hover-animation"></div>
							</div>
						</div>
						<!-- cc -->
						<div v-if="videoType > 0" class="prism-cc-btn" @mouseleave="mouseleave1()" @mouseenter="mouseenter1('tag4')" ref="tag4" @click="showVideoInfo=!showVideoInfo" style="float: right; margin-right: 15px; margin-top: 12px;"></div>
						<!-- 设置 -->
						<div v-show="false" class="prism-setting-btn" @mouseleave="mouseleave1()" @mouseenter="mouseenter1('tag5')" ref="tag5" style="float: right; margin-right: 15px; margin-top: 12px;">
						</div>
						<!-- 截屏 -->
						<div @click="screenshot" @mouseleave="mouseleave1()" @mouseenter="mouseenter1('tag6')" ref="tag6" style="float: right; margin-right: 9px; margin-top: 9px;">
							<a-icon type="camera" style="font-size: 24px; margin-top: 3px;"/>
						</div>
						<!-- 倍速 -->
						<a-tooltip v-if="!myIsLive" placement="top" :getPopupContainer="popupContainer">
							<template slot="title">
								<span class="ratevalue" @click="()=>{playbackRate = 0.5}">0.5倍速</span><br/>
								<span class="ratevalue" @click="()=>{playbackRate = 0.75}">0.75倍速</span><br/>
								<span class="ratevalue" @click="()=>{playbackRate = 1}">1倍速</span><br/>
								<span class="ratevalue" @click="()=>{playbackRate = 1.25}">1.25倍速</span><br/>
								<span class="ratevalue" @click="()=>{playbackRate = 1.5}">1.5倍速</span><br/>
								<span class="ratevalue" @click="()=>{playbackRate = 2}">2倍速</span><br/>
							</template>
							<div style="height: 24px; float: right; margin-right: 9px; margin-top: 13px;text-align: right;">
								{{ playbackRate }}倍速
							</div>
						</a-tooltip>
						<!-- 直播显示live,目前显示直播显示进度条 -->
						<div v-if="false&&myIsLive" name="直播">
							<p class="prism-live-display" style="position: absolute; left: 15px; top: 6px;">LIVE</p>
						</div>
						
					</div>
				</div>
				
				<div v-show="true" @dblclick="fullscreenClick" @mouseleave="mouseleave" @mouseenter="mouseenter" :style="'position: absolute;width: 100%;height: calc(100% - 44px);background-color: transparent;'"></div>
			</div>
			
			<div v-if="false && videoType > 0" :style="'position: absolute;width: 100% ;height:50px;left: ' + (0) + 'px;top:' + (computedHeight) +'px;background-color: rgba(0,0,0,.15);'">
				<!-- <a-button v-if="true" type="primary" @click="showVideoInfo=!showVideoInfo">视频信息</a-button> -->
				<!-- <a-button v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" type="primary">报警设置</a-button> -->
				<!-- <a-button v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" type="primary">待处理报警</a-button> -->
				<!-- <a-button v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" type="primary">待处理违规</a-button> -->
				<!-- <a-button v-if="videoType == 1 || videoType == 2 || videoType == 3 || videoType == 7" type="primary">录像设置</a-button> -->
				<!-- <a-button v-if="true && videoInfo" type="primary" @click="changeVideoType">{{ buttonText }}</a-button> -->
				<!-- <a-button v-if="videoInfo && (videoType == 4 || videoType == 5 || videoType == 6)" type="primary" @click="queryDownUrl(videoInfo)">下载录像</a-button> -->
			</div>
			
			<div v-if="false" :style="'position: absolute;top:'+ (computedHeight +50)  +'px'">
				<button @click="buttonClick('http://test2.iksonya.com/ts/test')">大鱼海棠直播</button>
				<button @click="buttonClick('http://192.168.3.100/index/api/webrtc?app=live&stream=test&type=play')">rtc测试</button>
<!-- 				<button @click="buttonClick('http://192.168.0.103/1.ts')">鬼灭之刃点播</button>
				<button @click="buttonClick('http://192.168.0.103/zhw.ts')">指环王点播</button> -->
			</div>

			
		</div>
	</div>
</template>

<!-- <script src="./dist/polyvisionts.js"></script> -->
<script>
import elementResizeDetectorMaker from "element-resize-detector";
// import { getAction } from '@/api/manage'
// import { getDownUrl, getChannelInfo } from '@/api/api'
import moment from 'moment'; 
import eventBus from "../../components/eventBus.js"
// import polyvisionts from './dist/polyvisionts.js'
// 

let polyvisionts = window._CONFIG['polyvisionts'];
let Hls = window._CONFIG['Hls'];
let flvjs = window._CONFIG['flvjs'];
let ZLMRTCClient = window._CONFIG['ZLMRTCClient'];

export default {
	name: 'Player',
	data() {
		return {
			title: '播放器',
			TSplayer: null,
			FLVplayer: null,
			HLSplayer: null,
			RTCplayer: null,
			changeWidth:0,
			changeHeight:0,
			isFullScreen:false,
			ti:null,//轮询播放器状态定时器
			status: 'none',//none：无状态，loading：加载中，play：播放，pause：暂停，ended：播放完毕，
			playing: false,
			dargToTime: 0,
			currentTime: 0,
			duration: 0,//Infinity
			mouseoffsetX: 0,//用于计算点击进度条，和显示进度条时间
			volumeValue:100,//音量
			saveVolumeValue:100,//保存音量，关闭之后再开启使用
			volumeClientY:0,//用于计算滑块位置
			playbackRate:1,//视频播放速率playbackRate
			showControlBar:false,
			showVideoInfo: false,
			showVolumeSlider:false,
			volumeSliderEnableMove:false,
			mouseInVolumeCursor:false,
			myUrl:'',
			myIsLive:true,
			myPlugin:'rtc',
			VInfo:null,
			downUrl:'',
			timeout:null,
			testData:'获取接口数据显示',
			testJSObject:null,
			/* 搜索条件下拉框 */
			playerDebug:false,
		};
	},
	components:{

	},
	props:{
		item: {
			type: Object,
			default: null
		},
		videoType: {
			type: Number,
			default: 0,
			required:false
		},
		maxWidth: {
			type: Number,
			default: 3200
		},
		fps: {
			type: Number,
			default: 25
		},
		width: {
			type: Number,
			default: 960
		},
		maxHeight: {
			type: Number,
			default: 1800
		},
		height: {
			type: Number,
			default: 540
		},
		urlOption: {
			type: Object,
			default: null
		},
		videoInfo: {
			type: Object,
			default: null
		},
	},
	watch:{
		urlOption(val,oldUrl) {
			console.log('urlOptionChange',oldUrl + '->' + val)
			if(val){
				this.myUrl = val.url;
				this.myIsLive = val.isLive;
				this.myPlugin = val.plugin;
				this.player_load(val.url)
			}
			else{
				this.player_destroy();
			}
		},
		// 下载录像使用 bizProgId，multiCastUrl，startDateTime，endDateTime
		// 获取节目信息 channelId，bizProgId，multiCastUrl，startDateTime，endDateTime
		videoInfo(val,oldUrl) {
			// console.log('videoInfochange',oldUrl + '->' + val)
			if(!val.ProgramInfo){
				// this.getEpgChannelInfo(val);
			}
		},
		volumeValue(val,oldUrl){
			if(val != 0){
				this.saveVolumeValue = val
			}
			var Media = this.$refs.video;
			Media.volume = val / 100
		},
		playbackRate(val,oldUrl){
			var Media = this.$refs.video;
			Media.playbackRate = val;
		},
	},
	computed: {
		buttonText(){
			return this.videoType == 1 ? '直播录像' : this.videoType == 2 ? '回看录像' : this.videoType == 3 ? '点播录像' : this.videoType == 4 ? '直播监看' : this.videoType == 5 ? '回看监看' : this.videoType == 6 ? '点播监看' : '直播录像'
		},
		toUrl(){
			return this.videoType == 1 ? '/watch/liveRecord' : this.videoType == 2 ? '/watch/backRecord' : this.videoType == 3 ? '/watch/chooseRecord' : this.videoType == 4 ? '/watch/liveWatch' : this.videoType == 5 ? '/watch/backWatch' : this.videoType == 6 ? '/watch/chooseWatch' : '/watch/liveRecord'
		},
		isInfinity(){
			return this.duration == Infinity
		},
		progressTipLeft(){
			let elwidth = 46;
			var width = this.$refs.video ? this.$refs.video.getBoundingClientRect().width :960
			if(Math.floor(this.duration * this.mouseoffsetX/width) > 3600) elwidth = 64
			// console.log(elwidth);
			if(this.mouseoffsetX - elwidth/2 < 5) return 5;
			if(width - this.mouseoffsetX - elwidth/2 < 5) return width -  elwidth - 5;
			return this.mouseoffsetX - elwidth/2;
		},
		computedWidth(){
			return this.changeWidth < this.maxWidth?this.changeWidth:this.maxWidth;
		},
		computedHeight(){
			return this.changeHeight < this.maxHeight?this.changeHeight:this.maxHeight;
		},
	},
	created() {},
	methods: {
		test(){
			console.log('111');
			return false
		},
		popupContainer() {
			return this.$refs.videoContainer;
		},
		buttonClick(url){
			this.player_load(url);
		},
		timeStr(time){
			if(time == Infinity)return ''
			if(time < 3600){
				let min = Math.floor(time / 60);
				min = min <= 9 ? ('0' + min) : (''+ min);
				let sec = Math.floor(time % 60);
				sec = sec <= 9 ? ('0' + sec) : (''+ sec);
				return min + ':' + sec
			}
			else{
				let hour = Math.floor(time / 3600);
				hour = hour <= 9 ? ('0' + hour) : (''+ hour);
				let min = Math.floor(time % 3600 /60);
				min = min <= 9 ? ('0' + min) : (''+ min);
				let sec = Math.floor(time % 60);
				sec = sec <= 9 ? ('0' + sec) : (''+ sec);
				return hour + ':' + min + ':' + sec
			}
		},
		
		// 鼠标移出主界面
		mouseleave(){
			// console.log('mouseleave')
			this.timeout = setTimeout(() => {
				this.showControlBar = false;
				this.showVolumeSlider = false
				this.timeout = null
			},300)
		},
		// 鼠标移入主界面
		mouseenter(){
			this.showControlBar = true;
			if(this.timeout){
				clearTimeout(this.timeout);
				this.timeout = null;
			}
		},
		// 鼠标移出控制栏按钮
		mouseleave1(tag){
			// console.log(tag)
			let el = this.$refs.tip;
			el.style.display = "none";
		},
		// 鼠标移入控制栏按钮
		mouseenter1(tag){
			// 先获取当前按钮中心
			let el1 = this.$refs[tag];
			let rect1 = el1.getBoundingClientRect();
			let center = (rect1.left + rect1.right)/2 - this.$refs.prismControlbar.getBoundingClientRect().left;

			let el = this.$refs.tip;
			if(tag == 'tag0'){
				el.innerText = '停止'
			}
			else if(tag == 'tag1'){
				el.innerText = this.playing ? '暂停' :'播放'
			}
			else if(tag == 'tag2'){
				el.innerText = this.isFullScreen || (this.item && this.item.isFull) ? '取消全屏' : '全屏'
			}
			else if(tag == 'tag3'){
				el.innerText = '音量'
			}
			else if(tag == 'tag4'){
				el.innerText = '节目信息'
			}
			else if(tag == 'tag5'){
				el.innerText = '设置'
			}
			else if(tag == 'tag6'){
				el.innerText = '截屏'
			}
			el.style.display = 'block';
			let width = el.getBoundingClientRect().width;
			let left = center - width/2
			el.style.left = left + 'px'
			el.style.right = ''
			// console.log(center)
			// console.log(width)
			// console.log(left)
		},
		// 鼠标移入进度条
		progressMouseenter(){
			// console.log('progressMouseenter')
			this.$refs.playerComponent.style.display = 'block';
			this.$refs.progressCursor.style.display = 'block';
		},
		// 鼠标移出进度条
		progressMouseleave(){
			// console.log('progressMouseleave')
			this.$refs.playerComponent.style.display = 'none';
			this.$refs.progressCursor.style.display = 'none';
		},
		// 鼠标移动进度条
		progressMousemove(e){
			// console.log('progressMousemove',e.offsetX,e.offsetY)
			var width =  this.$refs.video.getBoundingClientRect().width 
			this.mouseoffsetX = e.offsetX;
			this.dargToTime = this.duration * this.mouseoffsetX/width
		},
		// 鼠标点击音量开启关闭
		volumeClick(){
			if(this.volumeValue){
				this.volumeValue = 0
			}
			else{
				this.volumeValue = this.saveVolumeValue
			}
		},
		volumeMouseleave(){
			setTimeout(()=>{
				console.log('volumeMouseleave',this.mouseInVolumeCursor)
				this.showVolumeSlider = this.mouseInVolumeCursor
			},200)
		},
		// 鼠标按下音量
		volumeCursorMouseDown(e){
			this.volumeSliderEnableMove = true
			// console.log('MouseDown',e)
			var div = this.$refs.volumeSlider;
			var top = div.getBoundingClientRect().top;
			this.volumeClientY = parseInt(top);
		},
		// 鼠标移动音量
		volumeCursorMouseMove(e){
			if(!this.volumeSliderEnableMove) return;
			let offY = e.clientY - this.volumeClientY;
			let value = 115 -offY
			if(value > 100) value = 100;
			else if(value < 0) value = 0;
			this.volumeValue = value
			// console.log('MouseMove',value,e)
		},
		// 鼠标抬起音量
		volumeCursorMouseUp(e){
			this.volumeSliderEnableMove = false
		},
		// 鼠标移入音量
		volumeCursorMouseenter(e){
			console.log('volumeCursorMouseenter')
			this.mouseInVolumeCursor = true;
		},
		// 鼠标移出音量
		volumeCursorMouseleave(e){
			this.mouseInVolumeCursor = false;
			this.volumeSliderEnableMove = false
			this.showVolumeSlider = false
		},
    refreshVideoWithUrl(url,type,isLive){
			console.log(moment().format(' HH:mm:ss '),'------refreshVideoWithUrl----',url,type,isLive)
			this.myUrl = url;
			if(typeof isLive == 'boolean'){
				this.myIsLive = isLive;
			}
			this.myPlugin = type || this.myPlugin;
			if(url){
				this.player_load(url)
			}
			else{
				this.player_destroy();
			}
    },
		// 以下为播放器方法
		player_load(url) {
			this.myUrl = url;
			if(this.myPlugin == 'ts'){
				let mediaDataSource = {
					type: 'mse'
				};
				mediaDataSource['url'] = url;
				this.TSplayer_load_mds(mediaDataSource);
			}
			else if(this.myPlugin == 'flv'){
				let mediaDataSource = {
					type: 'flv'
				};
				mediaDataSource['url'] = url;
				this.FLVplayer_load_mds(mediaDataSource);
			}
			else if(this.myPlugin == 'rtc'){
				this.RTCplayer_load_url(url);
			}
			else if(this.myPlugin == 'hls'){
				this.HLSplayer_load_url(url);
			}
			this.status = 'loading'
		},
		TSplayer_load_mds(mediaDataSource) {
			this.player_destroy();
			var element = this.$refs.video;
			this.TSplayer = polyvisionts.createPlayer(mediaDataSource, {
				enableWorker: true,
			});
			this.TSplayer._config.isLive = this.myIsLive;
			this.TSplayer.attachMediaElement(element);
			this.TSplayer.load();
			this.status = 'loading'
			// Pause.disable = 'false';
			
			if(this.ti){
				clearTimeout(this.ti)
				this.ti = null;
			}
			this.ti = setTimeout(()=>{
				var Media = this.$refs.video;
				console.log('播放器状态',this.status)
				console.log('Media.error:',Media.error)//null:正常
				if(Media.error){
					console.log('Media.error.code:',Media.error.code)//1.用户终止 2.网络错误 3.解码错误 4.URL无效
				}
				if(this.status == 'loading'){
					console.log(moment().format(' HH:mm:ss '),'---------播放器加载超时，重新加载---------',this.myUrl)
					this.TSplayer_load_mds(mediaDataSource);
				}
				else if(this.status == 'play'){
					console.log(moment().format(' HH:mm:ss '),'---------播放器加载成功，无需重新加载---------')
				}
				// clearTimeout(this.ti)
				// this.ti = null;
			},3500)
		},
		FLVplayer_load_mds(mediaDataSource) {
			this.player_destroy();
			var element = this.$refs.video;
			console.log('------------')
			console.log(flvjs)
			this.FLVplayer = flvjs.createPlayer(mediaDataSource, {
				enableWorker: false,
				enableStashBuffer: false,
				lazyLoad: false,
				isLive: this.myIsLive,
				autoCleanupSourceBuffer: true,
				fixAudioTimestampGap: true,
			});
			this.FLVplayer.attachMediaElement(element);
			this.FLVplayer.load();
			this.status = 'loading'
			// Pause.disable = 'false';
		},
		RTCplayer_load_url(url) {
			// console.log(ZLMRTCClient)
			// console.log(this.RTCplayer)
			let _this = this
			this.player_destroy();
			this.RTCplayer = new ZLMRTCClient.Endpoint({
				element: this.$refs.video, // video 标签
				debug: false, // 是否打印日志
				zlmsdpUrl: url, //流地址
				useCamera: false,
				recvOnly: true
			});
			this.RTCplayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function(e) { // ICE 协商出错
				console.log('ICE 协商出错')
			});
			this.RTCplayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function(e) { //获取到了远端流，可以播放
				console.log('播放成功', e.streams)
			});
			this.RTCplayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function(e) { // offer anwser 交换失败
				console.log('offer anwser 交换失败', e)
				// stop();
				_this.player_destroy();
			});
			this.RTCplayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, function(s) { // 获取到了本地流
				// console.log('offer anwser 交换失败')
			});
			
			this.RTCplayer.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function(s) { // 获取本地流失败
				console.log('获取本地流失败')
			});
			this.RTCplayer.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function(
			state) { // RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
				console.log('当前状态==>', state)
			});
		},
		HLSplayer_load_url(url) {
			this.player_destroy();
			// url = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8'//测试地址
			if(url.indexOf('.m3u8') == -1 && url.indexOf('.M3U8') == -1 ){
				this.$message.warn("获取的播放地址格式错误");
				console.warn('获取的播放地址格式错误')
				return;
			}
			var element = this.$refs.video;
			if (Hls.isSupported()) {
				if(!this.HLSplayer){
					this.HLSplayer = new Hls();
				}
				this.HLSplayer.loadSource(url);
				this.HLSplayer.attachMedia(element);
				this.HLSplayer.on(Hls.Events.MANIFEST_PARSED,function(){
					// console.log('加载成功')
					this.player_start();
				})
				this.status = 'loading'
				// console.log(Hls)
				// console.log(hls)
			}
			else{
				console.log('hls加载错误')
			}
		},
		player_start() {
			this.playing = true
			if(this.myPlugin == 'ts'){
				if(this.TSplayer){
					this.TSplayer.play();
				}
				else{
					console.log('未加载视频文件')
				}
			}
			else if(this.myPlugin == 'flv'){
				if(this.FLVplayer){
					this.FLVplayer.play();
				}
				else{
					console.log('未加载视频文件')
				}
			}
			else{
				var video = this.$refs.video;
				video.play();
			}
		},
		player_pause() {
			this.playing = false
			if(this.myPlugin == 'ts'){
				if(this.TSplayer){
					this.TSplayer.pause();
				}
				else{
					console.log('未加载视频文件')
				}
			}
			else if(this.myPlugin == 'flv'){
				if(this.FLVplayer){
					this.FLVplayer.pause();
				}
				else{
					console.log('未加载视频文件')
				}
			}
			else{
				var video = this.$refs.video;
				video.pause();
			}
		},
		player_destroy() {
			if(this.TSplayer && typeof this.TSplayer == 'object'){
				this.TSplayer.pause();
				this.TSplayer.unload();
				this.TSplayer.detachMediaElement();
				this.TSplayer.destroy();
				this.TSplayer = null;
				console.log('销毁TSplayer')
			}
			if(this.FLVplayer && typeof this.FLVplayer == 'object'){
				this.FLVplayer.pause();
				this.FLVplayer.unload();
				this.FLVplayer.detachMediaElement();
				this.FLVplayer.destroy();
				this.FLVplayer = null;
				console.log('销毁FLVplayer')
			}
			if(this.RTCplayer && typeof this.RTCplayer == 'object'){
				// let element = this.$refs.video;
				// element.pause();
				this.RTCplayer.close();
				this.RTCplayer = null;
				let element = this.$refs.video;
				element.srcObject = null;
				element.load();
				console.log('销毁RTCplayer')
			}
			if(this.HLSplayer && typeof this.HLSplayer == 'object'){
				let element = this.$refs.video;
				element.pause();
				this.HLSplayer.detachMedia();
				this.HLSplayer.destroy();
				this.HLSplayer = null;
				console.log('销毁HLSplayer')
			}
			this.status = 'none'
			this.duration = 0;
			this.playing = false;
		},
		player_seekto(sec) {
			if(this.myPlugin == 'ts'){
				if(this.TSplayer){
					if(this.duration != 0 && this.duration != Infinity){
						this.TSplayer.currentTime = parseFloat(sec);
					}
					else{
						console.log('未获取到有效的视频时长')
					}
				}
				else{
					console.log('未加载视频文件')
				}
			}
			else if(this.myPlugin == 'flv'){
				if(this.FLVplayer){
					if(this.duration != 0 && this.duration != Infinity){
						this.FLVplayer.currentTime = parseFloat(sec);
					}
					else{
						console.log('未获取到有效的视频时长')
					}
				}
				else{
					console.log('未加载视频文件')
				}
			}
			else{
				var video = this.$refs.video;
				video.currentTime = sec;
			}
			
		},
		//播放停止
		videoStop(){
			this.player_destroy();
			// eventBus.$emit('playerClose',this.item.index);
		},
		// 播放暂停
		videoStart(toPlay){
			// console.log('------11111-----')
			this.playing = toPlay
			let el = this.$refs.tip;
			el.innerText = this.playing ? '暂停' :'播放'
			// console.log(TSplayer);
			// console.log(this.playing);
			if(this.TSplayer || this.FLVplayer || this.HLSplayer || this.RTCplayer){
				if(toPlay){
					this.player_start();
				}
				else{
					this.player_pause();
				}
			}
			else{
				if(this.myUrl){
					console.log('自动加载视频文件',this.myUrl)
					this.player_load(this.myUrl)
				}
				else{
					console.log('未加载视频文件')
				}
			}
		},
		// 截屏
		screenshot(){
			// this.savePic('111');
			var video = this.$refs.video;  // 找到需要截图的video标签
			video.setAttribute("crossOrigin", "anonymous"); //添加srossOrigin属性，解决跨域问题
			// console.log(video.videoWidth)
			// console.log(video.videoHeight)
			if(!video.videoWidth || !video.videoHeight){
				this.$message.warn('请打开有效视屏再截屏');
				return;
			}
			// var video = document.querySelector('#videoElementID');  // 找到需要截图的video标签
			var canvas = document.createElement("canvas");
			canvas.width = video.videoWidth;
			canvas.height = video.videoHeight; 
			canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);  // 图片大小和视频分辨率一致
			var strDataURL = canvas.toDataURL("image/png");   // canvas中video中取一帧图片并转成dataURL
			this.downFile(strDataURL, moment().format('YYYYMMDDHHmmss'));
			// this.downFileClicked(strDataURL, "图片");   //下载截图
		},
		// 下载截图到本地，绑定事件下载
		downFile(data, fileName) {
			var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');   //有效的内部空间URI
			save_link.href = data;
			save_link.download = fileName;
			var event = document.createEvent('MouseEvents');
			event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			save_link.dispatchEvent(event);
		},
		// 添加隐藏按钮下载
		downFileClicked(data, fileName) {
			var arr = data.split(','),
				mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]),
				n = bstr.length,
				u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			var blob = new Blob([u8arr], {
				type: mime
			});
			var url = window.URL.createObjectURL(blob);
			var a = document.createElement('a');  
			a.style.display = 'none';
			a.href = url;
			a.download = fileName;
			document.body.appendChild(a);
			a.click();
			setTimeout(function () {
				document.body.removeChild(a);
				window.URL.revokeObjectURL(url);
			}, 1000);
		},
		
		// 全屏点击方法
		fullscreenClick(){
			// console.log(this.item);
			if(this.item){
				if(this.item.isFull){
					eventBus.$emit('playerCancelFull',this.item.index);
				}else{
					eventBus.$emit('playerFull',this.item.index);
				}
			}
			else{
				console.log('没有播放信息')
			}
			// var video = this.$refs.videoContainer;
			// // 退出全屏
			// if(this.isFullScreen){
			// 	this.cancelFullscreen()
			// 	this.isFullScreen = false;
			// 	window.onresize = null;
			// }
			// else{
			// 	this.fullscreen(video)
			// 	this.isFullScreen = true;
			// 	window.onresize = this.onresize;
			// }
		},
		// window 监听是否全屏
		onresize() {
			console.log('window.onresize');
			var isFull =
				document.fullscreenElement ||
				document.mozFullScreenElement ||
				document.webkitFullscreenElement
			this.isFullScreen = isFull ? true :false;
			if(this.isFullScreen == false){
				window.onresize = null;
			}
		},
		// 全屏
		fullscreen (element) {
			if (element.requestFullscreen) {
				element.requestFullscreen();
			} else if (element.mozRequestFullScreen) {
				element.mozRequestFullScreen();
			} else if (element.msRequestFullscreen) {
				element.msRequestFullscreen();
			} else if (element.oRequestFullscreen) {
				element.oRequestFullscreen();
			} else if (element.webkitRequestFullscreen) {
				element.webkitRequestFullScreen();
			} else {
				console.log("这是全屏");
			}
		},
		// 退出全屏
		cancelFullscreen () {
			if (document.exitFullscreen) {
				document.exitFullscreen();  
			} else if (document.cancelFullScreen) {
				document.cancelFullScreen();
			} else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if (document.msCancelFullscreen) {
				document.msCancelFullscreen();
			} else if (document.oCancelFullscreen) {
				document.oCancelFullscreen();
			} else if (document.webkitCancelFullScreen) {
				document.webkitCancelFullScreen();
			} else {
				console.log("请按ESC退出全屏");
			}
		},
		// 监听事件
		eventAdd(e) {
			var Media = this.$refs.video;
			Media.addEventListener(e,()=>{
				if (e !='timeupdate'){
					console.log((new Date()).getTime(),e,'总时长:',Media.duration,'秒')
				}
				// 暂停，停止的时候playing=>false
				if (e=='ended') {
					console.log('ended',Media.duration)
					this.duration = Media.duration;
					this.playing = false;
					this.status = 'ended';
					// 直播情况下结束，重新开始直播
					if(this.myIsLive){
						if(this.myUrl){
							console.log('直播结束，重新连接如下直播地址：',this.myUrl);
							this.player_load(this.myUrl)
						}
					}
				}
				else if (e=='pause'){
					this.playing = false;
					this.status = 'pause'
				}
				else if (e=='play'){
					this.playing = true;
					this.status = 'play'
				}
				else if (e=='timeupdate'){
					// console.log('timeupdate',Media.currentTime)
					this.currentTime = Media.currentTime;
				}
				else if (e=='loadedmetadata'){
					// console.log('loadedmetadata',Media.duration)
					this.duration = Media.duration;
				}
				else if (e=='durationchange'){
					// console.log('loadedmetadata',Media.duration)
					this.duration = Media.duration;
				}
				else if (e=='abort'){
					console.log('-----------abort-----------')
					this.currentTime = 0;
					// this.duration = 0;
				}
				else if (e=='error'){
					console.log('-----------error-----------')
					this.currentTime = 0;
					this.duration = 0;
				}
				else if (e=='ratechange'){
					console.log('-----------ratechange-----------',Media.playbackRate)
				}
			},false);
		},
	},
	beforeDestroy() {
		console.log('player beforeDestroy')
		window.onresize = null;
		this.player_destroy();
		if(this.ti){
			clearTimeout(this.ti)
			this.ti = null;
		}
	},
	mounted() {
		console.log('player mounted');
		console.log(this.width)
		console.log(this.height)
		
		if(this.myUrl){
			this.player_load(this.myUrl)
		}
		
		// this.refreshVideoWithUrl('http://test2.iksonya.com/ts/test','ts',true);
		// setTimeout(()=>{
		// 	this.refreshVideoWithUrl('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8','hls',false);
		// },10000)
		
		// polyvisionts
		this.$nextTick(()=>{
			this.changeWidth = this.width;
			this.changeHeight = this.height;
		});
		
		if(polyvisionts){
			this.testJSObject = polyvisionts;
		}

		
		this.$nextTick(()=>{
			// this.eventAdd("loadstart"); //客户端开始请求数据
			// this.eventAdd("progress"); //客户端正在请求数据
			// this.eventAdd("suspend"); //延迟下载
			// this.eventAdd("abort"); //客户端主动终止下载（不是因为错误引起）
			// this.eventAdd("loadstart"); //客户端开始请求数据
			// this.eventAdd("progress"); //客户端正在请求数据
			// this.eventAdd("suspend"); //延迟下载
			this.eventAdd("abort"); //客户端主动终止下载（不是因为错误引起），
			this.eventAdd("error"); //请求数据时遇到错误
			// this.eventAdd("stalled"); //网速失速
			this.eventAdd("play"); //play()和autoplay开始播放时触发
			this.eventAdd("pause"); //pause()触发
			this.eventAdd("loadedmetadata"); //成功获取资源长度
			// this.eventAdd("loadeddata"); //
			// this.eventAdd("waiting"); //等待数据，并非错误
			// this.eventAdd("playing"); //开始回放
			// this.eventAdd("canplay"); //可以播放，但中途可能因为加载而暂停
			// this.eventAdd("canplaythrough"); //可以播放，歌曲全部加载完毕
			// this.eventAdd("seeking"); //寻找中
			// this.eventAdd("seeked"); //寻找完毕
			this.eventAdd("timeupdate"); //播放时间改变
			this.eventAdd("ended"); //播放结束
			this.eventAdd("ratechange"); //播放速率改变
			this.eventAdd("durationchange"); //资源长度改变
			this.eventAdd("volumechange"); //音量改变
			
		});
		
		
		
	}
	// todo 如果加载失败，url置空
};
</script>

<style lang="less" scoped>
	@import '../../../public/dist/aliplayer-min.css';
	.ant-btn{
		margin:10px;
	}
	.info{
		position: absolute;
		left: 1%;
		top: 1%;
		width: 32%;
		min-height: 20%;
		background-color: rgba(0,0,0,0.08);
		padding: 5px;
		.title{
			font-size: 20px;
			float:left;
			width: 50%;
			height: 30px;
		}
		.subTitle{
			font-size: 16px;
			float:left;
			width: 50%;
			height: 30px;
		}
		.content{
			margin-top: 5px;
			font-size: 14px;
			float:left;
		}
	}
	.alarmTips{
		position: absolute;
		left: 34%;
		top: 1%;
		width: 32%;
		min-height: 20%;
		background-color: rgba(0,0,0,0.08);
	}
	.recordTips{
		position: absolute;
		left: 67%;
		top: 1%;
		width: 32%;
		height: 20%;
		background-color: rgba(0,0,0,0.08);
	}
	.channelInfo{
		position: absolute;
		left: 1%;
		bottom: 1%;
		width: 32%;
		min-height: 20%;
		background-color: rgba(0,0,0,0.08);
		padding: 5px;
		.videoInfoItem{
			width: 100%;
			height: 24px;
			.title{
				margin-right: 5px;
				text-align: right;
				float:left;
				width: 110px;
				// height: 30px;
			}
			.subTitle{
				overflow: hidden;
				text-overflow: ellipsis; //超出部分以省略号显示
				white-space: nowrap;
				min-width: 30px; 
				max-width: 130px; 
				// font-size: 16px;
				float:left;
				// width: 50%;
				// height: 30px;
			}
		}
	}
	.alermSet{
		position: absolute;
		right: 1%;
		bottom: 1%;
		width: 32%;
		min-height: 20%;
		background-color: rgba(0,0,0,0.08);
	}
	//所有控件
	video::-webkit-media-controls{
		display:none !important;
	}
	.unuserselect{
		user-select:none;
		-webkit-user-select:none;
		-moz-user-select:none;
		-o-user-select:none;
	}
	.ratevalue{
		// cursor:default;
		cursor:pointer;
	}
	// //全屏按钮
	// video::-webkit-media-controls-fullscreen-button {
	//     display: none;
	// }
	// //播放按钮
	// video::-webkit-media-controls-play-button {
	//     display: none;
	// }
	// //进度条
	// video::-webkit-media-controls-timeline {
	//     display: none;
	// }
	// //观看的当前时间
	// video::-webkit-media-controls-current-time-display{
	//     display: none;            
	// }
	// //剩余时间
	// video::-webkit-media-controls-time-remaining-display {
	//     display: none;            
	// }
	// //音量按钮
	// video::-webkit-media-controls-mute-button {
	//     display: none;            
	// }
	// video::-webkit-media-controls-toggle-closed-captions-button {
	//     display: none;            
	// }
	// //音量的控制条
	// video::-webkit-media-controls-volume-slider {
	//     display: none;            
	// }
	// //所有控件
	// video::-webkit-media-controls-enclosure{ 
	//     display: none;
	// }
</style>
